<template>
  <basic-container>
    <!-- START goBack -->
    <div class="el-page-header haruyuki-mb-20">
      <div class="el-page-header__left haruyuki-flex-center haruyuki-size-18" @click="goBack" >
        <i class="el-icon-arrow-left"></i>
        <div class="haruyuki-size-16">返回</div>
      </div>
      <div class="el-page-header__content haruyuki-flex-center">
        <el-image style="width: 20px; height: 20px" src="/img/merchant-icon/store.png" fit="fill"></el-image>
        <span class="haruyuki-ml-6">收银员管理<span v-if="title">-{{title}}</span></span>
      </div>
    </div>
    <!-- END goBack -->
    <avue-crud
      :option="option"
      :search.sync="search"
      :table-loading="loading"
      :data="data"
      :page.sync="page"
      :permission="permissionList"
      :before-open="beforeOpen"
      v-model="form"
      ref="crud"
      @search-change="searchChange"
      @search-reset="searchReset"
      @selection-change="selectionChange"
      @current-change="currentChange"
      @size-change="sizeChange"
      @refresh-change="refreshChange"
      @sort-change="sortChange"
      @on-load="onLoad"
    >

      <template slot-scope="{ row }" slot="storeStatus">
        <el-switch
          :active-value="0"
          :inactive-value="1"
          v-model="row.storeStatus"
          @change="handleSwitch(row)"
        >
        </el-switch>
      </template>
      <!-- 左侧按钮 -->
      <template slot="menuLeft">
        <el-button type="primary" icon="el-icon-plus" size="small" @click.stop="handleSave">新增绑定音响</el-button>
      </template>
      <!-- 操作 -->
      <template slot-scope="{ row }" slot="menu">
        <el-button icon="el-icon-connection" size="small" type="text" @click.stop="rowDel(row)" >解除关联</el-button>
      </template>
    </avue-crud>
    <!-- 添加 -->
    <el-dialog
      :title="transferDialog.title"
      top="1%"
      append-to-body
      :close-on-click-modal="false"
      :visible.sync="transferDialog.visible"
      v-if="transferDialog.visible"
      :before-close="transferBeClose"
      ref="terDialog"
    >
      <el-transfer
        class="haruyuki-width-100 haruyuki-flex-center"
        filterable
        filter-placeholder="请输入简称"
        :button-texts="['解绑音响', '绑定音响']"
        :titles="['未绑定音响', '已绑定音响']"
        v-model="transferAllot"
        :data="transferData"
        :props="{
          key: 'rsSn',
          label: 'rsSn'
        }"
      >
        <span slot-scope="{ option }">{{ option.rpsName }} - {{ option.rptName }} - {{ option.rsSn }}</span>
      </el-transfer>
      <span slot="footer" class="dialog-footer">
        <el-button @click=" () => { transferDialog.visible = false; }">取 消</el-button>
        <el-button type="primary" v-preventClick @click="terminalSubmit">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 二级密码 -->
    <el-dialog
      title="二级密码"
      append-to-body
      width="440px"
      :close-on-click-modal="false"
      v-if="twoPwdShow"
      :visible.sync="twoPwdShow"
      :before-close="handleCloseTwoPwd"
    >
      <el-form :model="towPwdForm" ref="towPwdForm" label-width="0" class="demo-ruleForm">
        <el-form-item
          label=""
          prop="towPwd"
          :rules="[
            { required: true,message: '二级密码不能为空', trigger: ['change','blur']},
            { pattern: /^[0-9]{6}$/, message: '二级密码由6位数字组成', trigger: ['change','blur']}
          ]"
          >
          <el-input show-password v-model.number="towPwdForm.towPwd" autocomplete="off" placeholder="输入二级密码"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="twoPwdSubmit()">确 定</el-button>
      </div>
    </el-dialog>
  </basic-container>
</template>

<script>
import { getList,remove,buildEqPersonLarge as add,eqUnBindList as getUNList } from "@/api/rb-core/posinfo/terminalStore/store";
import { mapGetters } from "vuex";
// import { userHasInfo } from "@/api/rb-core/forgetPassword/forgetPassword";
import md5 from 'js-md5';
export default {
 
  data() {
    return {
      form: {},
      query: {},
      search: {},
      loading: true,
      excelBox: false,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      selectionList: [],
      option: {
        // height: "auto",
        calcHeight: 30,
        tip: false,
        border: true,
        index: true,
        addBtn: false,
        editBtn: false,
        viewBtn: false,
        delBtn: false,
        selection: true,
        searchMenuSpan: 6,
        searchLabelWidth:130,
        columnBtn: false,
        menuWidth: "140",
        column: [
          {
            label: "音响品牌",
            prop: "rpsName",
            type: "input",
            sortable: true,
            slot: true,
            display: false,
            overHidden: true,
          },
          {
            label: "音响类型",
            prop: "rptName",
            type: "input",
            // search: true,
            span: 24,
            overHidden: true,
          },
          
          {
            label: "音响简称",
            prop: "rtName",
            search: true,
            span: 24,
            rules: [
              {
                required: true,
                message: "请输入负责人",
                trigger: "blur",
              },
            ],
            overHidden: true,
          },
          {
            label: "所属门店",
            prop: "storeName",
            search: true,
            overHidden: true,
          },
          {
            label: "所属收银员",
            prop: "rpstName",
            search: true,
            overHidden: true,
          },
          {
            label: "绑定时间",
            prop: "createTime",
            type: "input",
            sortable: true,
            overHidden: true,
          }
        ]
      },
      data: [],
      transferDialog:{
        visible:false,
        title:'新增绑定门店'
      },
      transferAllot:[],
      transferData:[],
      
      objItme:{
        rptNo:'19',
        queryType:'4',
        rpiNo:"",
        storeNo:'',//门店编号
        rprNo:""//收银员编号
      },
      title:"",
      hasPayPwd:false,
      twoPwdShow:false,
      towPwdForm:{
        towPwd:''
      }
    };
  },
  computed: {
    ...mapGetters(["permission"]),
    permissionList() {
      return {
        addBtn: this.vaildData(false),
        viewBtn: this.vaildData(false),
        delBtn: this.vaildData(false),
        editBtn: this.vaildData(false)
      };
    }
  },
  created() {
    this.objItme.rpiNo = this.$route.query.rpiNo;//商户号
    this.objItme.rprNo = this.$route.query.rprNo;//收银员编号
    this.title = this.$route.query.title;
    this.objItme.storeNo = this.$route.query.rpsNo;
    this.getUserHasInfo();//是否 有二级密码
  },
  methods: {
    // 二级密码 关闭回调
    handleCloseTwoPwd(done){
      this.towPwdForm.towPwd="";
      done()
    },
    // 二级密码 确定
    twoPwdSubmit(){
      let that = this;
      this.$refs.towPwdForm.validate((valid) => {
        if (valid) {
          let param={
            payPwd:md5(that.towPwdForm.towPwd+''),
            rsSn: that.towPwdForm.rsSn,
            rprType: 2,//1门店2收银员
            id:that.towPwdForm.id
          }
          
          remove(param).then((res) => {
            that.onLoad(this.page);
            that.$message({
              type: "success",
              message: res.data.msg
            });
            that.$refs.crud.toggleSelection();
            that.twoPwdShow = false;
            that.towPwdForm.towPwd="";
          });
        } else {
          return false;
         }
      });
    },
    // 是否 有二级密码
    getUserHasInfo(){
      userHasInfo().then(res =>{
        this.hasPayPwd = res.data.data.hasPayPwd;
      }, error => {
        window.console.log(error);
      })
    },
    // 跳转用户信息页面
    toUserInfo(){
      this.$confirm('请您先设置二级密码，再操作！', '提示', {
        confirmButtonText: '确定',
        showCancelButton:false,
        type: 'warning'
      }).then(() => {
        this.$router.push({ path: '/info/index', query: { index: 2 }})
      })
    },
    // 关闭前回调
    transferBeClose(done){
      this.transferAllot=[];
      this.onLoad(this.page);
      done();
    },
    // 新建提交
    terminalSubmit(){
      if (this.transferAllot.length == 0) return this.$message({type: "warning", message: "请先绑定收银员!"});
      let param ={
        rsSn: this.transferAllot.join(","),//设备编号sn
        rprType: '2', //1门店2收银员
        rprNo: this.objItme.rprNo//收银员编号
      }
      add(param).then(res=>{
        this.onLoad(this.page);
        this.transferAllot=[];
        this.transferDialog.visible = false;
        this.$message({type: "success", message: res.data.msg})
      })
    },
    // 新建 --打开
    handleSave(){
      this.transferAllot=[];
      this.transferDialog.visible = true;
      // 未绑定
      //rprType: 1门店2收银员
      let param={
        rptNo: this.objItme.rptNo,
        queryType: this.objItme.queryType, 
        rpiNo: this.objItme.rpiNo,
        storeNo: this.objItme.storeNo, 
        rprNo: this.objItme.rprNo //收银员
      }
      getUNList(param).then((res) => {
        this.transferData = res.data.data;
      });
    },
    // 解绑
    rowDel(row) {
      if(!this.hasPayPwd){
        this.toUserInfo()
      } else {
        let param ={
          rsSn: row.rsSn,
          rprType: 2,//1门店2收银员
          id:row.id
        }
        Object.assign(this.towPwdForm, param)
        this.twoPwdShow = true;
      }
    },
    /* 返回页面 */
    goBack() {
      this.$router.$avueRouter.closeTag();
      this.$router.back();
    },
    onLoad(page, params = {}) {
      this.loading = true;
      // queryType: 1未绑定门店列表 2已绑定门店列表 3未绑定收银员列表 4已绑定收银员列表
      let param ={
        rptNo: this.objItme.rptNo,
        queryType: this.objItme.queryType, 
        rpiNo: this.objItme.rpiNo,
        storeNo: this.objItme.storeNo,
        rprNo: this.objItme.rprNo //收银员
      }
      getList(
        page.currentPage,
        page.pageSize,
        Object.assign(params,this.query,param)
      ).then((res) => {
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
        this.loading = false;
        this.selectionClear();
      });
    },
    searchReset() {
      this.query = {};
      this.onLoad(this.page);
    },
    searchChange(params, done) {
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
    },
    selectionChange(list) {
      this.selectionList = list;
    },
    selectionClear() {
      this.selectionList = [];
      this.$refs.crud.toggleSelection();
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    refreshChange() {
      this.onLoad(this.page, this.query);
    },    
    handleImport() {
      this.excelBox = true;
    },
    uploadAfter(res, done) {
      this.excelBox = false;
      this.refreshChange();
      done();
    },
    sortChange(val) {
      if (val.order == "ascending") {
        //正序
        this.query.ascs = val.prop;
        this.query.descs = "";
      } else {
        //倒序
        this.query.descs = val.prop;
        this.query.ascs = "";
      }
      this.refreshChange();
    }
  }
};
</script>

<style scoped>
  .haruyuki-flex-center /deep/ .el-transfer-panel {
    width:350px;
  }
</style>
